﻿@inject FwProject.Shop.Views.WebRootUrl WebRootUrl
@{
    ViewData["Title"] = "主页";
}
@section styles{
    <link href="~/static/css/client.css" type="text/css" rel="stylesheet" />
    <link href="~/static/css/system.css" type="text/css" rel="stylesheet" />
    <link href="~/static/css/contract.css" type="text/css" rel="stylesheet" />
    <link href="~/css/home.css" rel="stylesheet" />
    <style>
        #container {
            height: 240px;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
            position: relative;
            background: transparent;
            left: 0;
        }

        .box-c h1 {
            margin: 10px;
            font-size: 20px;
        }
    </style>
}
<div class="box box-a">
    <h1>新增商品</h1>
    <div class="layui-data layui-table-container" style="margin-top: 15px;">
        <table class="layui-hide layui-table" id="layui-table" lay-filter="table"></table>
    </div>
</div>
<div class="box box-b">
    <h2 style="text-align: left;">销售收入统计</h2>
    <input type="hidden" name="year" id="year" value="@DateTime.Now.Year" />
    <input type="hidden" name="month" id="month" value="@DateTime.Now.Month" />
    <div class="tubiao1">
        <div id="container" style="height:240px">

        </div>
    </div>
    <ul class="ulliy" style="clear:both">
        <li>
            收款金额
            <span class="receivables">￥@ViewBag.TotalPrice</span>
        </li>
        <li>
            退款金额
            <span class="refund">￥@ViewBag.ReturnPrice</span>
        </li>
        <li>
            实收金额
            <span class="paid">￥@ViewBag.Price</span>
        </li>
    </ul>
    <div style="text-align:center">
        <a class="layui-btn layui-btn-radius layui-btn-primary" style="color: white;background:#B2B1E8;margin:20px" href="javascript:top.NewTab(1111,'销售详细统计','@Url.Action("SaleDetails")')">销售详细统计</a>
    </div>
</div>
<div class="box box-c">
    <h1>新增订单</h1>
    <div class="layui-data layui-table-container1" style="margin-top: 15px;">
        <table class="layui-hide layui-table1" id="layui-table1" lay-filter="table1"></table>
    </div>
</div>
<div class="box box-d" style="text-align: center;">
    <p>商品统计</p>
    <button class="anniu-one" style="color: white;" onclick="javascript:top.NewTab(1010,'热卖商品排行','@Url.Action("ShopHotSelling")')">热卖商品排行</button>
    <button class="anniu-two" style="color: white;" onclick="javascript:top.NewTab(1011,'商品销售明细','@Url.Action("ShopSaleDetails")')">商品销售明细</button>
    <button class="anniu-three" style="color: white;" onclick="javascript:top.NewTab(1012,'商品收藏统计','@Url.Action("ShopCollection")')">商品收藏统计</button>
</div>
@section scripts{
    <script src="~/static/js/jquery.ztree.core.js" type="text/javascript"></script>
    <script src="~/static/js/jquery.ztree.excheck.js" type="text/javascript"></script>
    <script src="~/static/js/jquery.ztree.exedit.js" type="text/javascript"></script>
    <script src="~/Scripts/ECharts/echarts.js"></script>
    <script src="~/js/main.js"></script>

    @*<script src="~/signalr/hubs"></script>
        <script src="~/Abp/Framework/scripts/libs/abp.signalr.js"></script>*@

    <script type="text/javascript">
        var form, layer, table;
        var tableH = $(".layui-table-container").height();
        layui.use(['form', 'layedit', 'tree', 'table', 'layer'], function () {
            var form = layui.form
                , layer = layui.layer
                , layedit = layui.layedit
                , form = layui.form
                , table = layui.table;


            table.render({
                elem: "#layui-table",
                url: '/Home/GetCommodityData',
                cellMinWidth: 26,
                height: tableH,

               cols: [[
                   {

                       field: 'imagePic', title: '商品图片', templet: function (d) {
                            var img = "<img class='pic_logo' src='@WebRootUrl.WebImageRootUrl()/" + d.imagePic + "'/>";
                            return 'imagePic', img;
                       }, width: 100, align: 'center'
                    },
                   { field: 'productName', title: '商品名称'},
                   { field: 'productNumber', title: '商品编号'},
                   { field: 'spcemarketPrice', title: '销售价（￥）'}
                ]],
                id: "idTest",
                //limit: 5,
                //page: true,
                size:"lg",
                done: function (res, curr, count) {
                    $(".layui-table tbody").find("img").on('error', function () {
                        $(this).attr('src', "/images/photo_3.jpg");
                    })
                }
            });

            table.render({
                elem: "#layui-table1",
                url: '/Home/GetStayOrders',
                cellMinWidth: 26,
                height: tableH/2,
                cols: [[
                    //{ type: 'checkbox' },
                    { field: 'orderNumber', title: '订单号' },
                    {
                        field: 'creationTime', title: '下单日期', templet: function (d) {
                            var creationTime = new Date(d.creationTime);
                            return 'creationTime', top.dateFtt("yyyy-MM-dd hh:mm:ss", creationTime);
                        }
                    },
                    { field: 'payTotal', title: '订单总额' },
                    { field: 'payAmount', title: '实付金额' },
                    {
                        field: 'shopReceivingAddress', title: '收货人', templet: function (d) {
                            return 'shopReceivingAddress', d.shopReceivingAddress.receivingName;
                        }
                    },
                    {
                        field: 'payStatus', title: '支付状态', templet: function (d) {
                            if (d.payStatus == 0) {
                                return 'payStatus', "未支付";
                            } else if (d.payStatus == 1) {
                                return 'payStatus', "已支付";
                            } else {
                                return 'payStatus', "取消订单";
                            }
                        }
                    },
                    {
                        field: 'payType', title: '支付方式', templet: function (d) {
                            if (d.payType == 0) {
                                return 'payType', "微信";
                            } else if (d.payType == 1) {
                                return 'payType', "支付宝";
                            }
                        }
                    }
                ]],
                id: "idTest1"
            });
        })

        var myChart = echarts.init(document.getElementById('container'));
        var year = $('#year').val();
        var month = $('#month').val();
        option = {
            color: ['#76EEC6', '#8968CD', '#63B8FF'],
            title: {
                text: year + '年' + month+'月销售收入占比',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            //legend: {
            //    orient: 'vertical',
            //    left: 'left',
            //    data: ['收款金额', '退款金额', '实收金额']
            //},
            series: [
                {
                    name: '销售占比',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        { value: @ViewBag.TotalPrice, name: '收款金额' },
                        { value: @ViewBag.ReturnPrice, name: '退款金额' },
                        { value: @ViewBag.Price, name: '实收金额' }
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        $(function () {
            myChart.setOption(option);
        })
    </script>
}